<script setup lang="ts">
import Section from '@/components/Section/index.vue'
import { defineProps, nextTick, ref } from 'vue'
import ItemAsCard from '@/components/item-as-card/index.vue'
import cssIconfont from '@/components/collect-icon/index'
import * as _ from 'lodash'
import { switchStatus } from '@/api/example'
let props = defineProps({
  items: {
    type: Object
  },
  en: {
    type: String
  },
  zh: {
    type: String
  },
  iconName: {
    type: String
  },
  showb: {
    type: Boolean
  }
})
let imageSize = ref('320rpx')
const goToExampleDetailPage = (item) => {
  uni.navigateTo({
    url: `/pages/example/detail?id=${item.id}`
  })
}
const loadding = ref(false)
const handleTapCollect = _.debounce((item) => {
  if (loadding.value === true) {
    return
  }
  loadding.value = true
  // todo 代优化
  if (item.is_collected) {
    switchStatus(item.id, 0)
      .then((r) => {
        item.is_collected = false
      })
      .finally(() => {
        nextTick(() => {
          loadding.value = false
        })
      })
  } else {
    switchStatus(item.id, 1)
      .then((r) => {
        item.is_collected = true
      })
      .finally(() => {
        nextTick(() => {
          loadding.value = false
        })
      })
  }
}, 500)
</script>

<template>
  <Section :icon-name="iconName" :zh="zh" :en="en" :showBorder="showb">
    <view class="content">
      <view class="item" v-for="item in items" :key="item.id">
        <ImageFont @tap="goToExampleDetailPage(item)" :imagePath="item.image">
          <templte #left> {{ item.title }} | {{ item.space }} </templte>

          <template #right>
            <view class="right" @tap.native.stop="handleTapCollect(item)">
              <div class="right-content">
                <cssIconfont :isCollect="item.is_collected"></cssIconfont>
              </div>
            </view>
          </template>
        </ImageFont>
      </view>
    </view>
  </Section>
</template>

<style scoped lang="scss">
.content {
  .item {
    margin-bottom: 25rpx;
  }
}
</style>
